import {Link} from "react-router-dom"
import {useQuery} from "@tanstack/react-query"

import useFollow from "../../hooks/useFollow"

import RightPanelSkeleton from "../skeletons/RightPanelSkeleton"
import LoadingSpinner from "./LoadingSpinner"

const RightPanel = () => {
    const {data: suggestedUsers, isLoading} = useQuery({
        queryKey: ["suggestedUsers"],
        queryFn: async () => {
            try {
                const res = await fetch("/api/users/suggested")
                const data = await res.json()

                if (!res.ok) {
                    throw new Error(data.error || "Something went wrong")
                }
                return data
            }catch(error) {
                throw new Error("Error in RightPanel.jsx: " + error)
            }
        }
    })

    const {follow, isPending} = useFollow()

    if (suggestedUsers?.length === 0) return <div className="md:w-64 w-0"></div>

    // TODO: fix this comp
    return (
        <div>

        </div>
    )
}

export default RightPanel